<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>今天吃什么 - 筛选</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
    }
    .range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ff6b00;
      cursor: pointer;
    }
  </style>
</head>
<body class="pb-16">
  <!-- 引入组件模板 -->
  <iframe src="components.html" class="hidden" id="components-frame"></iframe>
  
  <!-- 顶部导航栏 -->
  <div class="bg-white shadow-md px-4 py-3 flex items-center justify-between sticky top-0 z-10">
    <div class="flex items-center">
      <button class="mr-2 text-gray-600" onclick="window.history.back()">
        <i class="fas fa-arrow-left"></i>
      </button>
      <h1 class="text-lg font-medium text-gray-800">筛选美食</h1>
    </div>
    <button class="text-orange-500 text-sm font-medium">
      重置
    </button>
  </div>
  
  <!-- 筛选表单 -->
  <div class="bg-white p-4">
    <!-- 价格区间 -->
    <div class="mb-6">
      <div class="flex justify-between items-center mb-2">
        <h3 class="font-medium">价格区间</h3>
        <div class="text-sm text-gray-500">¥<span id="price-value">50</span></div>
      </div>
      <input type="range" min="0" max="200" value="50" class="range-slider w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="price-range">
      <div class="flex justify-between text-xs text-gray-500 mt-1">
        <span>¥0</span>
        <span>¥200+</span>
      </div>
    </div>
    
    <!-- 用餐时间 -->
    <div class="mb-6">
      <h3 class="font-medium mb-3">用餐时间</h3>
      <div class="grid grid-cols-4 gap-2">
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600 active:bg-orange-500 active:text-white active:border-orange-500">早餐</button>
        <button class="py-2 border border-orange-500 rounded-lg text-sm text-orange-500 bg-orange-50">午餐</button>
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">下午茶</button>
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">晚餐</button>
      </div>
    </div>
    
    <!-- 口味偏好 -->
    <div class="mb-6">
      <h3 class="font-medium mb-3">口味偏好</h3>
      <div class="grid grid-cols-3 gap-2">
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">清淡</button>
        <button class="py-2 border border-orange-500 rounded-lg text-sm text-orange-500 bg-orange-50">香辣</button>
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">酸甜</button>
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">咸鲜</button>
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">麻辣</button>
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">不限</button>
      </div>
    </div>
    
    <!-- 菜系选择 -->
    <div class="mb-6">
      <h3 class="font-medium mb-3">菜系选择</h3>
      <div class="grid grid-cols-4 gap-2">
        <button class="py-2 border border-orange-500 rounded-lg text-sm text-orange-500 bg-orange-50">中餐</button>
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">西餐</button>
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">日料</button>
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">韩餐</button>
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">快餐</button>
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">火锅</button>
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">烧烤</button>
        <button class="py-2 border border-gray-200 rounded-lg text-sm text-gray-600">面食</button>
      </div>
    </div>
    
    <!-- 送达时间 -->
    <div class="mb-6">
      <div class="flex justify-between items-center mb-2">
        <h3 class="font-medium">送达时间</h3>
        <div class="text-sm text-gray-500"><span id="time-value">30</span>分钟内</div>
      </div>
      <input type="range" min="10" max="60" value="30" class="range-slider w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="time-range">
      <div class="flex justify-between text-xs text-gray-500 mt-1">
        <span>10分钟</span>
        <span>60分钟</span>
      </div>
    </div>
    
    <!-- 其他选项 -->
    <div class="mb-6">
      <h3 class="font-medium mb-3">其他选项</h3>
      <div class="space-y-3">
        <div class="flex items-center justify-between">
          <span class="text-sm text-gray-700">只看有优惠</span>
          <label class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" value="" class="sr-only peer">
            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-orange-500"></div>
          </label>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-sm text-gray-700">只看评分4.5以上</span>
          <label class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" value="" class="sr-only peer" checked>
            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-orange-500"></div>
          </label>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-sm text-gray-700">只看距离1km以内</span>
          <label class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" value="" class="sr-only peer" checked>
            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-orange-500"></div>
          </label>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部操作栏 -->
  <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg px-4 py-3 flex items-center">
    <button class="flex-1 bg-orange-500 text-white py-3 rounded-full text-center font-medium">
      查看筛选结果
    </button>
  </div>
  
  <!-- 底部导航栏 -->
  <div id="bottom-nav" class="hidden"></div>
  
  <script>
    // 等待组件iframe加载完成
    document.getElementById('components-frame').onload = function() {
      const componentsDoc = document.getElementById('components-frame').contentDocument;
      
      // 插入底部导航
      const bottomNavTemplate = componentsDoc.getElementById('bottom-nav-template');
      document.getElementById('bottom-nav').innerHTML = bottomNavTemplate.innerHTML;
      
      // 设置当前页面导航项为活跃状态
      const filterLink = document.querySelector('#bottom-nav a[href="filter.html"]');
      const filterIcon = filterLink.querySelector('i');
      const filterText = filterLink.querySelector('span');
      filterIcon.classList.replace('text-gray-400', 'text-orange-500');
      filterText.classList.replace('text-gray-600', 'text-orange-500');
      
      // 价格滑块
      const priceRange = document.getElementById('price-range');
      const priceValue = document.getElementById('price-value');
      
      priceRange.addEventListener('input', function() {
        priceValue.textContent = this.value;
      });
      
      // 时间滑块
      const timeRange = document.getElementById('time-range');
      const timeValue = document.getElementById('time-value');
      
      timeRange.addEventListener('input', function() {
        timeValue.textContent = this.value;
      });
    };
  </script>
</body>
</html> 